/**
 * Created by liaoweiping on 2016/12/26.
 * 账户管理
 */
import React from 'react';
import {Link,hashHistory} from 'react-router';

import Headers from '../../components/qoute/Headers';
import TipsCommon from '../../components/qoute/TipsCommon';

import Global from '../../actions/Global';
var filemgt_server_url = Global.host;

var AddSubAccount=React.createClass({
	getInitialState: function() {
		return {
           able:''
		};		
    },
	onTextChange: function (e) {
		if(this.refs.phone.value.trim()==''){
			this.setState({able:''});
		}else{
		    this.setState({able:this.refs.phone.value});
		}
    },
    addAccount:function(){
    	if(this.refs.phone.value.trim()==''){
    		return false;
    	}else{
    		this.props.add(this.refs.phone.value);
    	}   	
    },
    render: function() {   	
        return (
        	<div>
				<div className='modalBg' style={{display:this.props.isShow}}>				
				</div>
				<div className='accountmodal-box' style={{display:this.props.isShow}}>
					<h3>添加子账号</h3>
					<p><input ref='phone' type='text' onChange={this.onTextChange} placeholder='请输入手机号码' /></p>
					<a className={this.state.able?'accountmodal-able':''} onClick={this.addAccount}>确认添加</a>
				</div>
			</div>
		);
    }
});

var Account = React.createClass({
	getInitialState: function() {
		return {
		  data:null,
		  account:[],
		  subAccountShow:'none',
		  commonShow:'none',//是否显示提示框
          commonContent:''//提示框内容
		};
    },
    add:function(account){
    	//ajax请求添加子账户接口
		var param = {
			vendorId:this.state.data?this.state.data.vendorId:'',
			account:account
		};
		$.ajax({
			type: 'post',
			url: filemgt_server_url+'/account/addAccount',
			data: JSON.stringify(param),
			dataType: 'json',
			contentType:'application/json;charset=utf-8',
			success: function(data){
				if(data.errorCode==0){		    	
			    	this.setState({subAccountShow:'none'});
				    this.componentDidMount();	     
			    }else{
			    	this.setState({subAccountShow:'none'});
			    	this.setState({commonShow: 'block',commonContent:data.errorMsg});
				    setTimeout(function(){
						this.setState({ commonShow:'none',commonContent:''});
					}.bind(this),500);
			    }		    
			}.bind(this),
			error:function(){
				this.setState({subAccountShow:'none'});
				this.setState({commonShow: 'block',commonContent:'网络连接不上，请稍后再试'});
			    setTimeout(function(){
					this.setState({ commonShow:'none',commonContent:''});
				}.bind(this),500);			    
			}.bind(this)
		});
    },
	componentDidMount: function() {
        //ajax请求账户管理接口
		var param = {
			accountId:'1000103',
			accountType:'M'
		};
		$.ajax({
			type: 'post',
			url: filemgt_server_url+'/account/queryAccount',
			data: JSON.stringify(param),
			dataType: 'json',
			contentType:'application/json;charset=utf-8',
			success: function(data){
				if(data.errorCode==0){
			    	if(data.data==null){
				 		return false;
			    	}else{
			    		this.setState({data:data.data.vendorInfo,account:data.data.accontList});
			    	}			     
			    }else{
			    	this.setState({commonShow: 'block',commonContent:data.errorMsg});
				    setTimeout(function(){
						this.setState({ commonShow:'none',commonContent:''});
					}.bind(this),500);
			    }			    
			}.bind(this),
			error:function(){				
			    this.setState({commonShow: 'block',commonContent:'网络连接不上，请稍后再试'});
			    setTimeout(function(){
					this.setState({ commonShow:'none',commonContent:''});
				}.bind(this),500);
			}.bind(this)
		});
	},
	addSubAccount:function(){
		 this.setState({subAccountShow:'block'});
	},
 	render: function () {
 		var accountStaus,accountSubList=[],type;
 		type=this.state.data?this.state.data.vendorId:'';
 		if(this.state.data&&this.state.data.verifyStatus=='C'){
			accountStaus=(
				<div className='acoount-status'><span></span>账户资料已通过审核</div>
			);
		}else if(this.state.data&&this.state.data.verifyStatus=='D'){			
			accountStaus=(
				<div className='acoount-status account-statusde'><span></span>账户资料未通过审核，请重新编辑提交</div>
			);
		}else if(this.state.data&&this.state.data.verifyStatus=='B'){
			accountStaus=(
				<div className='acoount-status account-statusno'><span></span>账户资料等待审核</div>
			);
		}else{
			accountStaus='';
		}
 		if(this.state.account.length>0){
		    this.state.account.forEach(function(item,i){				
		        accountSubList.push (
		           <li key={i}>{item.account}</li>
		        );		
		    });
	    }
	    return (
	      <div className='full'>
	        <Headers title='账户管理'/>
	        <div className='account-content'>      
	         	<h3><i></i>账户信息<Link className='qouteDetail-cancle' to={'changeInfo/'+type}>更改资料</Link></h3>
	         	{accountStaus}
	         	<ul>
	         		<li>公司名称<span>{this.state.data?this.state.data.vendorName:''}</span></li>
	          		<li>联系人<span>{this.state.data?this.state.data.contacts:''}</span></li>
	          		<li>手机号码<span>{this.state.data?this.state.data.phoneNumber:''}</span></li>
	         	</ul>	         	
	        </div>
	        <p className='account-zhanwei'></p>
	        <div className='account-sub'>      
	         	<h3><i></i>子账户管理</h3>	         	
	         	<ul style={{display:accountSubList.length>0?'block':'none'}}>
	         		{accountSubList}
	         	</ul>
	         	<a className='account-btn' onClick={this.addSubAccount}>+添加子账号</a>
	        </div>
	        <AddSubAccount isShow={this.state.subAccountShow} add={this.add}/>
	         <TipsCommon isShow={this.state.commonShow} content={this.state.commonContent}/>
	      </div>
	    )
  	}
});
export default Account;
